<template>
  <div class="root">
    <wux-search-bar
      clear
      show-cancel
      :value="value"
      controlled
      placeholder="请输入客房名称"
      @change="onChange"
      @confirm="onConfirm"
      @clear="onClear"
    />
    <wux-tabs
      wux-class="bordered"
      controlled
      :current="currentIndex"
      @change="onTabsChange"
    >
      <wux-tab v-for="(item,index) in tabs" :key="index" :title="item.title"></wux-tab>
    </wux-tabs>
    <wux-spin nested :spinning="contentSpinning">
      <swiper class="content-swiper" :current="currentIndex" @change="onSwiperChange">
        <swiper-item>
          <div>
            <roomList :room="rooms" :showStyle="true"></roomList>
          </div>
        </swiper-item>
        <swiper-item>
          <div>
            <roomList :room="rooms" :showStyle="true" :isRoomGoods="true" :showRoomGoodsDetail="true"></roomList>
          </div>
        </swiper-item>
      </swiper>
    </wux-spin>
  </div>
</template>

<script>
import roomList from "@/components/rooms/roomList";

import typeConfig from "@/api/types";
export default {
  components: {
    roomList
  },
  data() {
    return {
      contentSpinning: false,
      rooms: [],
      value: "",
      tabs: [
        { title: "客房预订" }, { title: "客房商品购买" }
      ],
      currentIndex: 0
    };
  },
  mounted() {
    wx.showShareMenu();
    this.queryRooms();
  },
  methods: {
    onClear() {
      this.value = "";
    },
    onTabsChange(e) {
      this.currentIndex = e.target.key;
    },
    onSwiperChange(e) {
      this.currentIndex = e.target.current;
    },
    onChange(e) {
      this.value = e.target.value;
    },
    onConfirm() {
      const self = this;
      this.contentSpinning = !this.contentSpinning;
      this.$http
        .request({
          url: typeConfig.queryRoomsByShopId,
          method: "POST",
          body: {
            title: self.value,
            sId: this.$store.state.shop.id
          }
        })
        .then(res => {
          this.contentSpinning = !this.contentSpinning;
          this.rooms = res.list;
        });
    },
    queryRooms() {
      this.contentSpinning = !this.contentSpinning;
      this.$http
        .request({
          url: typeConfig.queryRoomsByShopId,
          method: "POST",
          body: {
            sId: this.$store.state.shop.id
          }
        })
        .then(res => {
          this.contentSpinning = !this.contentSpinning;
          this.rooms = res.list;
        });
    }
  }
};
</script>


<style scoped lang="less">
.root {
  .content-swiper {
    height: 100vh;
  }
}
</style>


